<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="container">
    <div class="content"></div>
    <div class="axisX"></div>
    <div class="axisY"></div>
</div>
<p><a href="javacript:" class="qc">清除</a></p>
<div class="info"></div>
<script src="https://cdn.bootcss.com/zepto/1.0rc1/zepto.min.js"></script>
<script src="https://cdn.bootcss.com/hammer.js/2.0.8/hammer.js"></script>
<script>
    var info = $('.info')
    $('.qc').click(function () {
        info.html('')
    })

    // 模拟数据
    var SerialNumber = [
        [
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0}
        ],
        [
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0}
        ],
        [
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0}
        ],
        [
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0}
        ],
        [
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0}
        ],
        [
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0}
        ],
        [
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0}
        ],
        [
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0}
        ],
        [
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0}
        ],
        [
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0}
        ],
        [
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0}
        ],
        [
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0}
        ],
        [
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0}
        ],
        [
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0}
        ],
        [
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0},
            {x: 1, isVacancy: 1}, {x: 1, isVacancy: 0}, {x: 1, isVacancy: 0}
        ]

    ];
    var gesture = {
        html: '',
        htmlX: '',
        htmlY: '',
        axisX: $('.axisX'),
        axisY: $('.axisY'),
        content: $('.content'),
        container: $('.container'),
        hammerContainer: '',
        currentX: 0, // 当前x
        currentY: 0,
        oldX: 0, // 上一次x
        oldY: 0,
        left: 0, // 元素当前位置
        oldLeft: 0,
        top: 0,
        oldTop: 0,
        maxLeft: 0, // 最大可移动值
        maxTop: 0,
        scale: 1, // 元素当前缩放比例
        speedX: 0, // 速度
        speedY: 0,
        htmlTemplate: function () { // 生成html
            for (var i = 0; SerialNumber.length > i; i++) {
                this.html += "<div>"
                this.htmlY += "<span>" + (i + 1) + "</span>"
                for (var n = 0; SerialNumber[i].length > n; n++) {
                    if (i === 0) {
                        this.htmlX += "<span>" + (n + 1) + "</span>"
                    }
                    this.html += '<span data-x="' + i + '" data-y="' + n + '" class="stool ' + (SerialNumber[i][n].isVacancy ? "isVacancy" : "") + '"></span>'
                }
                this.html += "</div>"
            }
            this.content.append(this.html)
            this.axisY.append(this.htmlY)
            this.axisX.append(this.htmlX)
        },
        tapFun: function () { // 可选点击事件绑定
            var _self = $(this), x = _self.attr('data-x'), y = _self.attr('data-y');
            _self.toggleClass('select')
            SerialNumber[x][y].isVacancy = SerialNumber[x][y].isVacancy === 1 ? 0 : 1
        },
        setOldPosition: function (e) { // 获取开始滑动时的位置
            gesture.oldLeft = gesture.left
            gesture.oldTop = gesture.top
        },
        pincFun: function (e) { // 缩放
            if (e.additionalEvent === 'pinchin') {
                if (gesture.scale > 0.5) {
                    gesture.scale -= 0.005
                }
            } else if (e.additionalEvent === 'pinchout') {
                if (gesture.scale < 1) {
                    gesture.scale += 0.005
                }
            }
            gesture.left = -50 * 45 * (1 - gesture.scale) / 2 + gesture.oldLeft * gesture.scale;
            gesture.top = -50 * 15 * (1 - gesture.scale) / 2 + gesture.oldTop * gesture.scale;
            // info.prepend(gesture.left + '  ')
            gesture.content.css({
                margin: 50 * gesture.scale + 'px 0 0 ' + 50 * gesture.scale + 'px',
                left: gesture.left,
                top: gesture.top,
                transform: 'scale(' + gesture.scale + ',' + gesture.scale + ')'
            })
            gesture.axisY.css({
                left: -50 * (1 - gesture.scale) / 2,
                top: gesture.top + 50 * gesture.scale,
                transform: 'scale(' + gesture.scale + ',' + gesture.scale + ')'
            })
            gesture.axisX.css({
                top: -50 * (1 - gesture.scale) / 2,
                left: gesture.left + 50 * gesture.scale,
                transform: 'scale(' + gesture.scale + ',' + gesture.scale + ')'
            })
        },
        setCurrent: function (e) { // 获取开始滑动时的位置
            gesture.currentX = e.center.x
            gesture.currentY = e.center.y
        },
        panmoveFun: function (e) {  // 移动
            console.info(e)
            gesture.oldX = gesture.currentX
            gesture.oldY = gesture.currentY
            gesture.currentX = e.center.x
            gesture.currentY = e.center.y
            gesture.speedX = gesture.currentX - gesture.oldX
            gesture.speedY = gesture.currentY - gesture.oldY
            gesture.left += gesture.speedX;
            gesture.top += gesture.speedY;

            // 位置限制还没做 具体怎么写还没想好。
            gesture.axisX.css({
                left: gesture.left + 50 * gesture.scale,
            })
            gesture.axisY.css({
                top: gesture.top + 50 * gesture.scale,
            })
            gesture.content.css({
                'left': gesture.left,
                'top': gesture.top
            })
        },
        Initialization: function () { // 初始化
            var _self = this
            _self.maxLeft = Math.abs(_self.content[0].offsetWidth - _self.container[0].offsetWidth)
            _self.maxTop = Math.abs(_self.content[0].offsetHeight - _self.container[0].offsetHeight)
            _self.htmlTemplate()
            $('span[class="stool isVacancy"]').tap(_self.tapFun)
            _self.hammerContainer = new Hammer(_self.container[0]);
            _self.hammerContainer.on("panstart", _self.setCurrent)
            _self.hammerContainer.on("panmove", _self.panmoveFun)
            _self.hammerContainer.add(new Hammer.Pinch());
            _self.hammerContainer.on("pinchstart", _self.setOldPosition)
            _self.hammerContainer.on("pinchmove", _self.pincFun)
        }

    }
    gesture.Initialization()
</script>
</body>
</html>